import React,{useEffect,useState} from 'react'
import dayjs from 'dayjs'
import { Button,Form,Input,Table,
  Popconfirm,Modal,InputNumber,Select,
  DatePicker} from 'antd'
import { useForm } from 'antd/es/form/Form'

import { getUser,addUser,editUser,delUser } from '../../api'

import './index.css'

export default function User() {

  // 列表渲染需要的参数对象
  const [listData,setListData] = useState({
    name:''
  })

  // 表格数据
  const [tableData,setTableData] = useState([])

  // 弹出框的显示标题,0代表新增/1表示编辑
  const [modalType,setModalType]=useState(0)

  // 控制弹出框的打开/关闭
  const [isModalOpen,setIsModalOpen] = useState(false)

  // 创建Form实例
  const [form] = useForm()

  // 新增/编辑操作
  const handleClick=(type,rowData)=>{
    if(type==='add'){
      setIsModalOpen(true)
      setModalType(0)
    }else{
      // 数据深拷贝
      const cloneData=JSON.parse(JSON.stringify(rowData))
      cloneData.birth=dayjs(cloneData.birth)
      setModalType(1)
      setIsModalOpen(true)
      console.log(cloneData);
      // 表单数据的回填
      form.setFieldsValue(cloneData);
    }
  }
  // 删除操作
  const handleDelete=({id})=>{
    delUser({id}).then(()=>{
      getTableData()
    })
  }
  // 点击完成操作
  const handleFinish=(e)=>{
    // console.log(e);
    // 这是一个异步操作
    setListData({
      name:e.keyword
    })
    console.log(e)   
  }
  // 进行列表数据的获取操作
  const getTableData=()=>{
    getUser(listData).then(({data})=>{
      // console.log(res);
      console.log(data.list);
      setTableData(data.list)
    })
  }

  // 弹出框确认回调
  const handleOk=()=>{
    // 进行表单校验
    form.validateFields().then(val=>{
      // console.log(val);
      // 对日期进行处理
      val.birth=dayjs(val.birth).format('YYYY-MM-DD')
      // console.log(val);
      // 调用后端接口
      if(modalType){ //编辑
        editUser(val).then(()=>{
          handleCancel()
          getTableData()
        })
      }else{
        addUser(val).then(()=>{
          handleCancel()
          getTableData()
        })
      }
    }).catch((err)=>{
      console.log(err);
    })
  }

  // 弹出框取消回调
  const handleCancel=()=>{
    setIsModalOpen(false)
    // 清空表单数据
    form.resetFields()
  }

  const columns=[
    {
      title:'姓名',
      dataIndex:'name'
    },
    {
      title:'年龄',
      dataIndex:'age'
    },
    {
      title:'性别',
      dataIndex:'sex',
      // render参数获取当前字段
      render:(val)=>{
        return val ? '女' : '男'
      }
    },
    {
      title:'出生日期',
      dataIndex:'birth'
    },
    {
      title:'地址',
      dataIndex:'addr'
    },
    {
      title:'操作',
      // 没有当前字段，整个当前行的数据
      render:(rowData)=>{
        return (
          <div className='flex-box'>
            <Button style={{marginRight:'5px'}} onClick={()=>handleClick('edit',rowData)}>编辑</Button>
            <Popconfirm
              title="提示"
              description="此操作将删除该用户，是否继续？"
              cancelText="取消"
              okText="确认"
              onConfirm={()=>handleDelete(rowData)}
            >
              <Button type='primary' danger>删除</Button>
            </Popconfirm>
          </div>
        )
      }
    }
  ]

  // mounted操作
  useEffect(()=>{
    // 调用后端接口，获取用户列表数据
    getTableData()
  },[])

  // state发生变化后再进行列表渲染
  useEffect(()=>{
    getTableData()
  },[listData])

  return (
    <div className='user'>
      <div className='flex-box space-between'>
        <Button type='primary' onClick={()=>{handleClick('add')}}>+新增</Button>
        <Form
        layout='inline'
        onFinish={handleFinish}
        
        >
          <Form.Item name='keyword'>
            <Input placeholder='请输入用户名' />
          </Form.Item>
          <Form.Item>
            <Button htmlType='submit' type='primary'>搜索</Button>
          </Form.Item>
        </Form>
      </div>
      {tableData && <Table columns={columns} dataSource={tableData} rowKey={'id'} />}
      <Modal
        forceRender
        open={isModalOpen}
        title={modalType?'编辑用户':'新增用户'}
        onOk={handleOk}
        onCancel={handleCancel}
        okText='确定'
        cancelText='取消'
      >
        <Form
          name='popForm'
          form={form}
          labelCol={{
            span:6
          }}
          wrapperCol={{
            span:18
          }}
          labelAlign='left'
        >
          { modalType === 1 &&
            <Form.Item
              name='id'
              hidden
            >
            
            </Form.Item>
          }
          <Form.Item
            label='姓名'
            name='name'
            rules={[
              {
                required:true,
                message:'请输入姓名'
              }
            ]}  
          >
            <Input placeholder='请输入姓名'/>
          </Form.Item>
          <Form.Item
            label='年龄'
            name='age'
            rules={[
              {
                required:true,
                message:'请输入年龄'
              },
              {
                type:'number',
                message:'年龄必须是数值'
              }
            ]}  
          >
            <InputNumber placeholder='请输入年龄'/>
          </Form.Item>
          <Form.Item
            label='性别'
            name='sex'
            rules={[
              {
                required:true,
                message:'请输入性别'
              }
            ]}  
          >
            <Select
              placeholder="请选择性别"
              options={[
                {value:0,label:'男'},
                {value:1,label:'女'},
              ]}
            ></Select>
          </Form.Item>
          <Form.Item
            label='出生日期'
            name='birth'
            rules={[
              {
                required:true,
                message:'请选择出生日期'
              }
            ]}  
          >
            <DatePicker 
              placeholder='请选择' 
              format="YYYY/MM/DD"
            />
          </Form.Item>
          <Form.Item
            label='地址'
            name='addr'
            rules={[
              {
                required:true,
                message:'请输入地址'
              }
            ]}  
          >
            <Input placeholder='请输入地址'/>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}
